import React, { useState} from 'react';
import navs from "@/data/navs";
import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import NavDropdown from 'react-bootstrap/NavDropdown'

const Child =(props)=>{
    //console.log(props)
    const handleClick = () =>{
        props.changRe()
    }
    
    const Navs = (data,issub=false) => {
        return data.map((item) => {
            if (item.subs) {
                return  <NavDropdown title={item.title} id={"basic-nav-dropdown"+item.id} key={item.id}>
                                {Navs(item.subs,true)}
                        </NavDropdown>
            } else {
                return item.title==='-' ?  (issub)? <NavDropdown.Item key={item.id}><hr className="dropdown-divider" /></NavDropdown.Item> : ''
                    : (issub)? <NavDropdown.Item href="{item.url}" key={item.id}>{item.title}</NavDropdown.Item> : <Nav.Link href="{item.url}" key={item.id}>{item.title}</Nav.Link>
            }
        })
    }    
    return (
        <>
        <Navbar id="header" className="navbar sticky-top  navbar-expand-lg navbar-light bg-light shadow-sm" bg="light"  expand="lg">
            <Navbar.Toggle aria-controls="navbarNavDropdown" />
            <Navbar.Brand href="/"><img className="ms-4" src={props.logo} height="48" alt="logo" /></Navbar.Brand>
            <Navbar.Collapse id="navbarNavDropdown">
                <Nav className="mr-auto">
                        {Navs(navs)}
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    </>
    )
}


const Header = (props) => {


    const [re,setRe] = useState(false)
    const changRe=()=>{setRe(!re)}
    //console.log(re)
    return re? <div><Child changRe={changRe} {...props} /></div> : <Child changRe={changRe} {...props} />

}

Header.defaultProps = {
    bg: 'bg-blue-700',
    theme: 'dark',
    logo: '/img/logo192.png',
    h: 12,
}


export default Header;
